<template>
  <div>
    <p>{{myname}}</p>
    <p>{{$store.state.count}} | {{count}}</p>
    <!-- 模块组的使用  下面使用的话,一样要使用到计算属性 -->
    <p>{{$store.state.a.count}} | {{count}}</p>
    <p>
      <button @click='$store.commit("add")'>+</button>
      <button @click='reduce(5)'>-</button>
    </p>
    <p>
      <button @click='addAction'>+</button>
      <button @click='reduceAction(5)'>-</button>
    </p>

    <button @click="test"> 测试</button>

    <b @click='logMyName'>点击</b>
  </div>
</template>
<script>
  import store from '@/vuex/store'
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'  //// 第2种方法 state访问状态对象 需要引入这个

  export default{
    data(){
      return{
        myname:'我的帅名字'
      }
    },
    // 2.state访问状态对象
    // 第一种方法  通过computed的计算属性直接赋值
    // computed:{
    //   count13(){
    //     return this.$store.state.count;
    //   }
    // },
    // 第二种方法 通过mapState的对象来赋值
    // computed:mapState({
    //   count123:state=>state.count
    // }),
    // 第三种方法,常用通过mapState的数组来赋值
    // computed:mapState(["count"]), //但是里面的值count要和store.js里面的一致,否则取不出来  ,前面两种一致或者不一致都可以
    // 4.getters计算过滤操作
    computed:{
      // 默认已经有了一个mapState,就是上面的写法,如果要多写,则使用ES6展开运算符”…”
      ...mapState(["count"]),//但是里面的值count要和store.js里面的一致,否则取不出来  ,前面两种一致或者不一致都可以

      // count(){
      //   return this.$store.getters.count;  //需要注意的是，你写了这个配置后，在每次count 的值发生变化的时候，都会进行加100的操作
      // }
      // 简写
      // ...mapGetters(['count'])

      // 5. 模块组
      count(){
        return this.$store.state.a.count
      }
    } ,

    // 3. Mutations修改状态 需要把这个方法写在methods里面
      // 这样处理, 在做点击事件的时候,写就不用那么麻烦,写起来和vue操作一样 比如减法
    methods:{
      ...mapMutations(['add','reduce']),
      ...mapActions(['addAction','reduceAction']),
      // 调用 this.reduce(10)相当调用 this.$store.commit('reduce',10)---待验证
      test(){
        this.reduce(10)
      },
      // vuex需要es6的拓展符,普通的vue方法,可以直接在这里写
      logMyName(){
        console.log('my name');
      }
      
    }
    ,

    store  ////引入进来,记得在这里使用
  }
</script>
<style></style>
